<!-- 治疗方案 -->
<template>
  <div id="box">
    <div style="margin-left:15px ">
      <el-radio-group v-model="planType" @change="queryList()">
        <el-radio-button v-if="!(this.$store.getters.hospitalId == 76 || this.$store.getters.hospitalId == 201)" label="胸痛" />
        <el-radio-button label="卒中" />
      </el-radio-group>
    </div>
    <div class="textR" style="margin: 10px;">
      <el-button type="primary" @click="clearAll();modelData.dialogTitle='新增治疗方案' ;newOrModify=true;">新增治疗方案</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="planName" label="方案名称" align="center" />
      <el-table-column prop="planContent" label="方案描述及来源" align="center" />
      <el-table-column prop="type" label="疾病类型" align="center" width="200" />
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="delLine(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block textR">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        :hide-on-single-page="!true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 增改模板 -->
    <el-dialog :title="modelData.dialogTitle" :visible.sync="newOrModify" custom-class="dialogStyle" :close-on-click-modal="false">
      <div class="box-card" shadow="hover" style="margin: 15px;">
        <el-form label-position="right" label-width="100px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="方案名称" required>
                <el-input v-model.trim="modelData.planName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="疾病类型" required>
                <el-select v-model="modelData.disease" placeholder="请选择" @change="modelData.type = ''">
                  <el-option label="胸痛" value="胸痛" />
                  <el-option label="卒中" value="卒中" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label=" 方案描述">
            <el-input v-model="modelData.planContent" type="textarea" class="planContent" />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newOrModify = false">取 消</el-button>
        <el-button type="primary" @click="toSave()">保 存</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script type="text/javascript">
import { queryList, delTreatment, saveTreatment } from '@/api/back-management/treatment_plan'
export default {
  name: '',
  data() {
    return {
      tableData: [],
      currentPage: 1,
      tableTotal: 0,
      pageNum: '1', // 当前页
      pageSize: '10', // 每页的数量
      newOrModify: false,
      modelData: {
        id: '',		// id
        planName: '',		// 方案名称
        planContent: '',	// 方案内容
        dialogTitle: '', // 模板标题
        disease: '' // 疾病类型（胸痛卒中）
      },
      planType: (this.$store.getters.hospitalId == '76' || this.$store.getters.hospitalId == '201') ? '卒中' : '胸痛' // 方案类型-胸痛/卒中
    }
  },
  mounted() {
    this.queryList()
    console.log('治疗方案')
  },
  methods: {
    toSave() {
      if (this.modelData.planName === '' || !this.modelData.planName) {
        this.$message({
          message: '方案名称不能为空',
          type: 'warning'
        })
        return false
      } else if (this.modelData.disease === '' || !this.modelData.disease) {
        this.$message({
          message: '疾病类型不能为空',
          type: 'warning'
        })
        return false
      }
      this.saveData()
    },
    saveData() {
      const data = {
        userId: this.$store.getters.userId,
        hospitalId: this.$store.getters.hospitalId,
        planName: this.modelData.planName,
        planContent: this.modelData.planContent,
        type: this.modelData.disease
      }
      let type = ''
      if (this.modelData.id) {
        data.id = this.modelData.id
        type = '修改'
      } else {
        type = '保存'
      }
      saveTreatment(data).then(res => {
        if (res.code === 9999) {
          this.$message({
            type: 'error',
            message: type + '失败!'
          })
        } else {
          this.queryList()
          this.$message({
            type: 'success',
            message: type + '成功!'
          })
          this.clearAll()
        }
      })
    },
    clearAll() {		// 清空模板
      this.modelData.id = ''
      this.modelData.planName = ''
      this.modelData.planContent = ''
      this.modelData.dialogTitle = ''
      this.modelData.disease = ''
      this.modelData.type = ''
      this.newOrModify = false
    },
    handleClick(row) {	// 回显
      this.clearAll()
      this.modelData.planName = row.planName
      this.modelData.planContent = row.planContent
      this.modelData.dialogTitle = '修改治疗方案'
      this.modelData.id = row.id
      this.modelData.disease = row.type
      this.newOrModify = true
      // console.log(row);
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.queryList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.queryList()
      console.log(`当前页: ${val}`)
    },
    // 查询菜单
    queryList() {
      const data = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        type: this.planType,
        apiToken: this.$store.getters.apiToken
      }
      queryList(data).then(res => {
        this.tableData = res.data.list
        this.tableTotal = res.data.total
      })
    },
    delLine(id) {
      this.$confirm('此操作将永久删除该方案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delTreatment({ 'id': id }).then(res => {
          if (res.code === 0) {
            this.queryList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
      })
    }
  }
}
</script>

	<style type="text/css" scoped >
		.dialogStyle {
			text-align: center;
			min-width: 700px;
			min-height: 400px;
		}
		.planContent  textarea{
			min-height: 135px;
		}
	</style>
